<div class="panel-comorder {{ onTab.value.type }}">
  <!-- <TLoading :tloading="tv.tpanelOrder.tloading" /> -->
  <div class="hd df jcsb" (click)="show = !show">
    <div class="l df">
      <div
        v-i18n="{i18n:i18n.delegateCol,key:item.name}"
        (click)="onChangeTab(item)"
        class="i df aic"
        *ngFor="let item of tabs; let index = i"
        [ngClass]="{ on: onTab.value.type == item.type }"
      >
        <ng-container *ngIf="item.type === tab">
          <i
            class="icon iconfont"
            *ngIf="!show"
            style="margin-right:10px;color:#116CEB"
            >&#xe622;</i
          >

          <i
            class="icon iconfont"
            *ngIf="show"
            style="margin-right:10px;color:#116CEB"
            >&#xe620;</i
          >

          <span l10nTranslate> {{ item.name }} </span>
        </ng-container>
      </div>
    </div>
    <div class="r df asc jcsb" *ngIf="false">
      <div
        v-i18n="{i18n:i18n.delegateCol,key:item.name}"
        (click)="setOnFilter($event, item)"
        class="i asc"
        [ngClass]="{ on: onFilter.value.type == item.type }"
        *ngFor="let item of filters; let index = i"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
  <ng-container *ngIf="show">
    <div class="bd df">
      <div class="i date">{{ "i18n.delegateCol.date" | translate: lang }}</div>
      <div class="i">{{ "i18n.delegateCol.tradePair" | translate: lang }}</div>
      <div class="i type">{{ "i18n.delegateCol.type" | translate: lang }}</div>
      <div class="i">{{ "i18n.delegateCol.price" | translate: lang }}</div>
      <div class="i">{{ "i18n.delegateCol.amount" | translate: lang }}</div>
      <!-- <div class="i">{{i18n.delegateCol.total}}</div> -->
      <div class="i">{{ "i18n.delegateCol.executed" | translate: lang }}</div>
      <div class="i">{{ "i18n.delegateCol.operate" | translate: lang }}</div>
    </div>
  </ng-container>
  <div class="ft" [hidden]="!show" data-scrollbar style="overflow-y: scroll;">
    <app-login-tip *ngIf="!(isLogin$ | async)" [type]="'order'"></app-login-tip>
    <div class="h" *ngIf="(isLogin$ | async)">
      <div class="r df" *ngFor="let item of lists; let index = i">
        <div class="i date">
          <!-- {{item.date | dubaiDate('YYYY-MM-DD HH:mm:ss')}} -->
          {{ item.time | l10nDate: defaultLocale:"short" }}
        </div>
        <div class="i">{{ item.zi }} / {{ item.mu }}</div>
        <div class="i" l10nTranslate>
          {{ item.type === "buy" ? "i18n.exchange.buy" : "i18n.exchange.sell" }}
        </div>
        <div class="i">{{ item.price }}</div>
        <div class="i" v-formatAmount="{val:item.amount,point:minPoint}">
          {{ item.amount }}
        </div>
        <!-- <div class="i">{{item.total}}</div> -->
        <div class="i" v-formatAmount="{val:item.executed,point:minPoint}">
          {{ item.used }}
        </div>
        <div class="i">
          <button
            *ngIf="item.tab === 'active'"
            v-loading="item.loading"
            type="button"
            (click)="item.action[0].onClick($event, item)"
          >
            {{ "i18n.delegateCol.revoke" | translate: lang }}
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="page" [hidden]="!show">
    <mat-paginator
      (page)="onChangePage($event)"
      [length]="page.total"
      [pageSize]="req.size"
      [pageSizeOptions]="[5, 10, 25, 100]"
    >
    </mat-paginator>
  </div>

  <!--
    <div class="ft df jcc" [hidden]="isLogin">
      <app-login-tip></app-login-tip>
    </div>

    <div class="ft df jcc aic" [hidden]="isNoData">
      <app-no-data></app-no-data>
    </div>
  -->
</div>
